
import { VNodeDirective } from '@/interface/types/vnode';

const pushShow = (e: MouseEvent) => {
  const el = e.currentTarget as HTMLElement;
  el.classList.remove('v-button-push');
  el.classList.add('v-button-push-none');
}

const pushHiden = (e: MouseEvent) => {
  const el = e.currentTarget as HTMLElement;
  el.classList.add('v-button-push');
  el.classList.remove('v-button-push-none');
}

const beforeMount = (el: HTMLElement, binding: VNodeDirective) => {
  if (binding.value) {    
    el.classList.add('v-button-push');
    el.classList.remove('v-button-push-none');
    el.addEventListener('mousedown', pushShow);
    el.addEventListener('mouseup', pushHiden);
    el.addEventListener('mouseleave', pushHiden);
  } else {
    el.classList.remove('v-button-push');
    el.classList.add('v-button-push-none');
    beforeUnmount(el);
  }
}

const beforeUnmount = (el: HTMLElement) => {
  el.removeEventListener('mousedown', pushShow);
  el.removeEventListener('mouseup', pushHiden);
  el.removeEventListener('mouseleave', pushHiden);
}

const Push = {
  beforeMount,
  beforeUnmount
}

export {
  Push
}